<template>
  <div>
    <div class="app-container dealerdetail_container">
      <div class="page_header">工单详情</div>
      <el-tabs v-model="tabTypeInfo" type="card">
        <el-tab-pane label="用户预约信息" name="basicInfo"></el-tab-pane>
        <el-tab-pane label="测量信息" name="responsibleInfo"></el-tab-pane>
        <el-tab-pane label="施工信息" name="businessInfo"></el-tab-pane>
        <el-tab-pane label="闭水试验" name="accountInfo"></el-tab-pane>
        <el-tab-pane label="检测信息" name="accountInfo"></el-tab-pane>
        <el-tab-pane label="监管信息" name="accountInfo"></el-tab-pane>
      </el-tabs>
      <div class="detail_page" v-show="tabTypeInfo === 'basicInfo'">

      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'responsibleInfo'">

      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'businessInfo'">

      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'accountInfo'">

      </div>
    </div>
  </div>
</template>

<script>
  import { getDealerDetail } from '@/api/dealer/index'
  export default {
    name: 'Testorderdetail',
    components: {},
    data() {
      return {
        tabTypeInfo: 'basicInfo',
        formData: {
        }
      }
    },
    computed: {
      ID() {
        return this.$route.query.id
      },
      dealerStatus() {
        return this.findSelectText(this.formData.dealerStatus, this.dealerStatusOptions)
      },
      dealerType() {
        return this.findSelectText(this.formData.dealerType, this.dealerTypeOptions)
      },
      dealerFunList() {
        return this.findCheckboxText(this.formData.dealerFunList, this.dealerRoleListOptions)
      },
      dealerRoleList() {
        return this.findCheckboxText(this.formData.dealerRoleList, this.dealerRoleListOptions)
      },
      dealerLevel() {
        return this.findSelectText(this.formData.dealerLevel, this.dealerLevelOptions)
      }
    },
    async created() {
      this.initDictsOptions('dealer_status', 'dealerStatusOptions')
      this.initDictsOptions('dealer_type', 'dealerTypeOptions')
      this.initDictsOptions('dealer_work_role', 'dealerRoleListOptions')
      this.initDictsOptions('dealer_level', 'dealerLevelOptions')
    },
    async mounted() {
      try {
        const res = await getDealerDetail(this.ID)
        this.formData = Object.assign(this.formData, res.data)
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑类不缓存
    // async activated() {
    // },
    methods: {
      async initDictsOptions(dicts, listProps) {
        try {
          const res = await this.getDicts(dicts)
          if (res.code === 200) {
            this[listProps] = res.data.map((per) => ({
              label: per.dictLabel,
              value: per.dictValue
            }))
          }
        } catch (error) {
          console.log(error)
        }
      },
      findSelectText(value, options) {
        const obj = options.find((item) => {
          return item.value === value
        }) || { lable: '' }
        return obj.label
      },
      findCheckboxText(values, options) {
        if (values.length > 0) {
          return values
            .map((per) => {
              const obj = options.find((item) => item.value === per) || { label: '' }
              return obj.label
            })
            .join(',')
        }
        return ''
      }
    }
  }
</script>

<style lang='scss'>
  .dealerdetail_container {
    .detail_page {
      .detail_label {
        width: 150px;
      }
    }
  }
</style>




